<template>
	<!-- 公交路线设置 -->
	<div id="RouteSetting">
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<div>
					<el-breadcrumb-item :to="{ name: 'managerCar' }">车辆管理</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ name: 'carInfo',query:{car_id:car_id} }">车辆信息查看</el-breadcrumb-item>
					<el-breadcrumb-item>路线设置</el-breadcrumb-item>
				</div>
			</el-breadcrumb>
		</div>
		<div class="routeSetting">
			<div class="StartAndEnd">
				<div>
					<label>出发地:</label>
					<el-input v-model="departure.name" placeholder="地点名"></el-input>
					<div class="input">
						<input v-model='departure.lon' placeholder="地点经度" @keyup="InputLimitLon($event,'departure')"></input>
					</div>
					<div class="input">
						<input v-model='departure.lat' placeholder="地点纬度" @keyup="InputLimitLat($event,'departure')"></input>
					</div>
					<span style="line-height: 60px;color: red;">*</span>
				</div>
				<div>
					<label>目的地:</label>
					<el-input v-model="destination.name" placeholder="地点名"></el-input>
					<div class="input">
						<input v-model='destination.lon' placeholder="地点经度" @keyup="InputLimitLon($event,'destination')"></input>
					</div>
					<div class="input">
						<input v-model='destination.lat' placeholder="地点纬度" @keyup="InputLimitLat($event,'destination')"></input>
					</div>
					<span style="line-height: 60px;color: red;">*</span>
				</div>
			</div>
			<div class="addWay">
				<div v-for="(item,index) in route" :key='index'>
					<div class="way">
						<label>途径地{{ index+1 }}:</label>
						<el-input v-model='route[index].name' placeholder="地点名"></el-input>
						<div class="input">
							<input v-model='route[index].lon' placeholder="地点经度" @keyup="InputLimitLon($event,index)"></input>
						</div>
						<div class="input">
							<input v-model='route[index].lat' placeholder="地点纬度" @keyup="InputLimitLat($event,index)"></input>
						</div>
						<el-button @click="deleteWay(index)" icon="el-icon-minus"></el-button>
					</div>
					<div class="addButton" v-if="index == route.length-1  ">
						<el-button @click="addWay(index)" icon="el-icon-plus"></el-button>
					</div>
				</div>
			</div>
			<div class="foot">
				<div class="jiexi">
					<el-input placeholder="地址解析" v-model="address">
						<template slot="prepend">广东省</template>
					</el-input>
					<el-button icon="el-icon-search" circle @click="Geocoder"></el-button>
					<div>
						<span>{{jiexi}}</span>
					</div>
				</div>
				<el-button type="primary" @click="saveRoutes" class="saveButton">保存</el-button>
			</div>
		</div>
		<div>

		</div>
	</div>
</template>

<script>
	import BMap from 'BMap'
	export default {
		data() {
			return {
				car_id: 0,
				first: true,
				departure: {}, //出发点
				destination: {}, //目的点
				route: [{}],
				address:'',
				jiexi:''
			}
		},
		computed: {

		},
		created() {
			this.car_id = this.$route.query.car_id;
			if (this.car_id != 0) {
				this.getBusRoutes();
			}
		},
		methods: {
			InputLimitLon(e, index) {
				let reg = /^\-?\d{1,3}(?:\.\d{0,6})?/
				let num = e.target.value.toString().match(reg)
				if (num != null) {
					e.target.value = num[0]
					
					if (typeof index == 'number') {
						this.route[index].lon = num[0]
					}
					if (typeof index == 'string') {
						this[index].lon = num[0]
					}

				}


			},
			InputLimitLat(e, index) {
				let reg = /^\-?\d{1,2}(?:\.\d{0,6})?/
				let num = e.target.value.toString().match(reg)
				if (num != null) {
					e.target.value = num[0]
					
					if (typeof index == 'number') {
						this.route[index].lat = num[0]
					}
					if (typeof index == 'string') {
						this[index].lat = num[0]
					}
				
				}

			},
			deleteWay(index) {
				if (index == 0) {
					return;
				}
				this.$delete(this.route, index)
			},
			addWay(index) {
				if (index >= 7) {
					return;
				}
				let a = {}
				this.$set(this.route, index + 1, a)
			},
			getBusRoutes() {
				this.$axios.get('/api/car/getBusRoutes', {
						params: {
							car_id: this.car_id
						}
					})
					.then(data => {
						if (data.data == 'no') {
							this.first = true;
						} else {
							this.first = false;
							let departure = JSON.parse(data.data[0].departure)
							let destination = JSON.parse(data.data[0].destination)
							let way = JSON.parse(data.data[0].way)

							this.departure = departure
							this.destination = destination
							this.route = way;

						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			saveRoutes() {
				let route = this.route.filter(item=>{
					if(item.name && item.lon && item.lat){
						return item
					}
				})
				if(!this.departure.name || !this.departure.lon || !this.departure.lat){
					alert('请正确输入出发地信息')
					return ;
				}
				if(!this.destination.name || !this.destination.lon || !this.destination.lat){
					alert('请正确输入目的地信息')
					return ;
				}
				let departure = JSON.stringify(this.departure);
				let destination = JSON.stringify(this.destination);
				
				
				let way = JSON.stringify(route)
				let car_id = this.car_id;
				let busInfo = {
					departure,
					destination,
					way,
					car_id,
				}
				let busLoc = {
					cur_loc_lon:this.departure.lon,
					cur_loc_lat:this.departure.lat,
					id:this.car_id
				}
				this.updateCarLoc(busLoc)
				if (this.first) {
					this.insertBusRoutes(busInfo)
				} 
				else {
					this.updateBusRoutes(busInfo)
				}
			},
			insertBusRoutes(busInfo) {
				this.$axios.post('/api/car/insertBusRoutes', busInfo)
					.then(data => {
						if (data.data == 'ok') {
							this.$router.push({
								name: 'carInfo',
								query: {
									car_id: this.car_id
								}
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			updateBusRoutes(busInfo) {
				this.$axios.post('/api/car/updateBusRoutes', busInfo)
					.then(data => {
						if (data.data == 'ok') {
							this.$router.push({
								name: 'carInfo',
								query: {
									car_id: this.car_id
								}
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			updateCarLoc(busLoc) {
				this.$axios.post('/api/info/updateCarLoc', busLoc)
					.then(data => {
						if (data.data == 'ok') {
							
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			Geocoder(){ //地址解析，将输入的地址解析成经纬度
				var myGeo = new BMap.Geocoder();
				// 将地址解析结果显示在地图上,并调整地图视野
				myGeo.getPoint(this.address, (point)=>{
					if (point) {
						this.jiexi = `经度:${point.lng}----纬度:${point.lat}`
					}else{
						this.jiexi="您输入地址没有解析到结果!";
					}
				}, "广东省");
			}

		}
	}
</script>

<style scoped lang="less">
	.input() {
		-webkit-appearance: none;
		background-color: #FFF;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 100%;

		&:focus {
			border-color: deepskyblue;
		}

		&::-webkit-input-placeholder {
			color: #ccc;
			font-size: 14px;
		}

		&::-moz-placeholder {
			//不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点
			color: #ADD8E6;
		}

		&:-ms-input-placeholder {
			//由于我的IE刚好是IE9，支持不了placeholder，所以也测试不了(⊙﹏⊙)，有IE10以上的娃可以帮我试试
			color: #ADD8E6;
		}
	}

	#RouteSetting {
		width: 100%;
		height: 100%;

		.breadcrumb {
			height: 28px;

			span {
				line-height: 28px;

			}
		}

		.routeSetting {
			width: 740px;
			height: 90%;
			border: 1px solid #E0ECFF;
			margin: 20px auto;
			overflow: hidden;
			position: relative;

			.StartAndEnd {
				div {
					display: flex;
					margin: 10px 10px;

					.el-input {
						flex: 0 0 180px;

					}

					.input {
						flex: 0 0 180px;
						margin: 10px 10px;


						input {
							.input();
						}
					}

					label {
						flex: 0 0 80px;
						line-height: 60px;
					}
				}
			}

			.addWay {
				max-height: 300px;
				overflow-y: auto;
				position: absolute;
				right: -13px;

				.way {
					display: flex;
					margin: 5px 10px;

					.el-input {
						flex: 0 0 180px;
						margin: 0 10px;
					}

					.input {
						flex: 0 0 180px;
						margin: 0 10px;


						input {
							.input();
						}
					}

					label {
						flex: 0 0 80px;
						line-height: 40px;
					}

					button {
						flex: 0 0 40px;
						height: 40px;
						border-radius: 50%;
						padding: 0;
					}
				}

				.addButton {
					button {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						padding: 0;

					}
				}
			}

			.foot {

				position: absolute;
				top: 500px;
				
				
				.jiexi{
					width: 300px;
					height: 100px;
					position: absolute;
					top:-20px;
					left:20px;
					span{
						line-height: 40px;
					}
					.el-input{
						width: 250px;
						height: 40px;
						el-input-group__prepend{
							
						}
					}
					.el-button{
						width: 40px;
						height: 40px;
					}
				}
				.saveButton{
					position: absolute;
					height: 50px;
					left: 450px;
				}

			}

		}
	}
</style>
